/* stylelint-disable declaration-no-important */
/* stylelint-disable selector-max-compound-selectors */

/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");

:host {
  container-type: inline-size;
  display: block;
}

.field {
  --hover-bg-color: var(--color-gray20);

  inline-size: 100%;
  max-inline-size: 450px;

  & .add-assignee {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--spacing-8);
  }

  & .assigned-button-noperm {
    flex: 1 1 auto;
  }

  & .field-label {
    align-self: flex-start;
    color: var(--color-gray80);
    display: block;
    flex-shrink: 0;
    inline-size: 100%;
    line-height: 32px;
    margin-block-end: var(--spacing-4);
    padding-inline-end: var(--spacing-8);

    &:not(.readonly) {
      font-weight: var(--font-weight-medium);
    }
  }

  & .field-content {
    max-inline-size: 100%;

    &:not(._focused) {
      &::ng-deep [tuiwrapper][data-appearance="textfield"]::after {
        opacity: 0;
      }
    }
  }

  & .assign-user {
    margin-block-end: var(--spacing-8);
    max-block-size: 280px;
    overflow: auto;
  }

  & .assigned-users-list {
    display: flex;
    flex-direction: column;
    margin-block-end: var(--spacing-8);
    outline-offset: -2px;
    padding: 0;
  }

  & .assigned-user,
  & .assigned-user-tooltip-wrapper {
    align-items: center;
    display: flex;
    gap: var(--spacing-8);
    margin-block-end: 0;

    &:not(:last-child) {
      margin-block-end: var(--spacing-4);
    }
  }

  & ::ng-deep {
    & tui-avatar {
      block-size: 28px;
      inline-size: 28px;
    }
  }

  & .assigned-name {
    @mixin ellipsis;

    color: var(--color-gray80);
    inline-size: 100%;
    margin-block-end: 0;
  }

  &::ng-deep .is-self {
    color: var(--color-black);
    font-weight: var(--font-weight-regular);
  }

  & .not-assigned {
    display: flex;
    justify-content: space-between;

    & span {
      color: var(--color-gray80);
      font-style: italic;
      line-height: 32px;
    }
  }
}

.unassigned-button-noperm {
  color: var(--color-gray80);
  font-style: italic;
  line-height: 32px;
}

@container (inline-size > 280px) {
  .field {
    align-items: center;
    display: flex;

    & .field-label {
      margin-block-end: 0;
      max-inline-size: 30%;
      min-inline-size: 0;
    }

    & .field-content {
      max-inline-size: 70%;
    }

    & ::ng-deep {
      & label {
        inline-size: 30%;
        margin: 0;
      }

      & .field-content {
        min-inline-size: 70%;
      }
    }
  }
}

.status-tui {
  & ::ng-deep {
    & tui-select-option {
      & .t-content {
        max-inline-size: 100%;
      }
    }

    & .t-input {
      padding-block: 0 !important;
      padding-inline: var(--tui-padding-l) 0.5rem !important;
    }

    & .t-textfield .t-content {
      padding-inline: var(--tui-padding-l) 0.5rem !important;
    }

    & .t-input_template {
      inline-size: 100% !important;
      max-inline-size: 100% !important;
      padding-inline-start: var(--spacing-4) !important;
    }
  }
}

.loading-status {
  background: var(--color-gray10);
  padding: var(--spacing-8);

  & .loading-status-content {
    background: var(--color-gray30);
    block-size: 15px;
    border-radius: 4px;
    inline-size: 100%;
  }
}

.status-option {
  align-items: center;
  border-radius: 4px;
  display: flex;
  inline-size: 100%;
  padding: var(--spacing-4);

  & .status-color {
    block-size: var(--spacing-12);
    border: 3px solid var(--color-gray100);
    border-radius: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    inline-size: var(--spacing-12);
    margin-inline-end: var(--spacing-8);
  }

  & .status-name {
    @mixin ellipsis;
  }
}
